import React from "react";
import {
  Card,
  Row,
  Col,
  Table,
  Tag,
  Button,
  Input,
  Typography,
  Space,
} from "antd";
import styles from "./index.module.less";

const { Title } = Typography;

const Basic: React.FC = () => {
  const columns = [
    {
      title: "面板名称",
      dataIndex: "panelName",
      key: "panelName",
      render: (text: string, record: any) => (
        <Space data-oid="vi1:2yl">
          {text}
          <Tag
            color={
              record.type === "开发"
                ? "blue"
                : record.type === "需求"
                  ? "green"
                  : "gray"
            }
            data-oid="-62rm2:"
          >
            {record.type}
          </Tag>
        </Space>
      ),
    },
    {
      title: "任务类型",
      dataIndex: "taskTypes",
      key: "taskTypes",
      render: (types: string[]) => (
        <Space wrap data-oid="kyo_gtc">
          {types.map((type, index) => (
            <Tag key={index} color="gray" data-oid="uwlboud">
              {type}
            </Tag>
          ))}
        </Space>
      ),
    },
    {
      title: "价值列",
      dataIndex: "valueColumns",
      key: "valueColumns",
      render: (columns: string[]) => (
        <Space direction="vertical" size="small" data-oid="71w5z4z">
          {columns.map((column, index) => (
            <Tag key={index} color="gray" data-oid="6t3r9wa">
              {column}
            </Tag>
          ))}
        </Space>
      ),
    },
    {
      title: "操作",
      key: "action",
      render: () => (
        <Button type="primary" data-oid="a93-fg2">
          编辑
        </Button>
      ),
    },
  ];

  const data = [
    {
      key: "1",
      panelName: "开发板",
      type: "开发",
      taskTypes: ["代码检视", "缺陷", "事项", "特性/特性功能"],
      valueColumns: [
        "待办(Backlog)",
        "分析设计(预研&估点；测试案例)",
        "开发自测(待开发；开发中；开发完成；结卡失败/需二次结卡)",
        "联调()",
        "ST测试(待测试；测试中；案例未通过；阻碍；测试完成)",
        "UAT测试()",
        "投产(待投产)",
        "结项()",
        "完成(完成)",
      ],
    },
    {
      key: "2",
      panelName: "需求板",
      type: "需求",
      taskTypes: ["管理", "需求"],
      valueColumns: [
        "待办(Backlog)",
        "分析(开始处理；评估中；评估完成；暂缓)",
        "设计()",
        "评审()",
        "完成(立项/取消)",
      ],
    },
    {
      key: "3",
      panelName: "日常板",
      type: "日常管理",
      taskTypes: ["行动项", "代码检视", "日常"],
      valueColumns: ["待办(Backlog)", "执行(In Progress)", "完成(Done)"],
    },
  ];

  return (
    <div className={styles.container} data-oid=".i585oe">
      <Row gutter={[16, 16]} data-oid="chphyy0">
        <Col span={12} data-oid="w4cuv56">
          <Card data-oid="yqy9ft5">
            <Title level={2} data-oid="23ndm6i">
              看板信息
            </Title>
            <p data-oid="kz8bg5u">
              <strong data-oid="l40avlv">看板负责人：</strong>王宇壮/80276430
            </p>
            <p data-oid="7pscyha">
              <strong data-oid="call-nd">看板名称：</strong>电子看板开发组
            </p>
            <p data-oid="03py7vq">
              <strong data-oid="1_e70.v">WIP设置：</strong>
              每个资源最多能点亮的任务卡数：3
            </p>
            <Button type="primary" data-oid="np3q9:l">
              更新
            </Button>
          </Card>
        </Col>
        <Col span={12} data-oid="grwzbr.">
          <Card data-oid="ijbzyn2">
            <Title level={2} data-oid="9_6f-ea">
              面板管理
            </Title>
            <Table
              columns={columns}
              dataSource={data}
              pagination={false}
              scroll={{ y: 500 }}
              data-oid="-.94c.7"
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Basic;
